<template>
  <div class="movie" @scroll="scrollFn($event)">
    <div class="item" v-for="item in list" :key="item.filmId" @click="goDetail(item.filmId)">
      <img :src="item.poster" alt="">
      <div class="info">
        <h4>{{ item.name }}</h4>
        <p>评分:{{ item.grade }}</p>
        <p>主演:{{ item.actors?.map(v=>v.name).join(' ') }}</p>
        <p>{{ item.nation }} | {{ item.runtime }}分钟</p>
      </div>
      <button>购票</button>
    </div>
    <div class="bar">{{ list.length === total? "没有更多数据了": '加载中。。。' }}</div>
    <!-- <router-view />
    <router-link to="/home/movie/Comingsoon">即将上映</router-link> -->
  </div>
</template>

<script>
import axios from 'axios';
export default { 
  data() {
    return {
      list:[],
      pageNum:1,
      total:0
    }
  },
  methods:{
    async getList() {
        const res = await axios.get('https://m.maizuo.com/gateway',{
        params:{
          cityId:110100,
          pageNum:this.pageNum,
          pageSize:10,
          type:1,
          k:5408174
        },
        headers:{
          'x-client-info':'{"a":"3000","ch":"1002","v":"5.2.1","e":"173088338914639202754887681","bc":"110100"}',
          'x-host':'mall.film-ticket.film.list'
        }
      })
      console.log(res.data.data)
      this.list = this.list.concat(res.data.data.films)
      this.total = res.data.data.total
    },
    goDetail(id) {
      console.log(id,this.$router)
      // // js跳转页面
      // // this.$router.push('/detail')
      // this.$router.push({
      //   path:'/detail',
      //   // query传参
      //   query:{
      //     id,
      //     name:'aaa',
      //     num:123
      //   }
      // })
      // 动态跳转页面
      // this.$router.push('/detail/111')
      this.$router.push({
        name:'detail',
        params:{
          id:id
        }
      })
    },
    scrollFn(e) {
      if(this.list.length === this.total) return
      const{scrollTop,offsetHeight,scrollHeight} = e.target
      console.log(scrollTop,offsetHeight,scrollHeight)
      if(Math.ceil(scrollTop) + offsetHeight >= scrollHeight){
        // console.log('到底了')
        this.pageNum++
        this.getList()
      }
    }
  },
  created() {
    this.getList()
  }
}
</script>

<style lang="scss" scoped>
.movie{
  overflow: auto;
  height: 100%;
  // a{
  //   line-height: 40px;
  //   text-align: center;
  //   flex: 1;
  // }
}
.item{
  display: flex;
  padding: 15px;
  border-bottom: 1px solid #CCC;
  align-items: center;
  img{
    width: 66px;
    height: 99px;
  }
  .info{
    flex: 1;
    margin: 0 10px;
    color: #333;
    overflow: hidden;
    p{
      font-size: 12px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      margin: 8px 0;
    }
  }
  button {
    width: 50px;
    height: 25px;
  }
}
.bar{
  height: 40px;
  line-height: 40px;
  text-align: center;
  background: #DDD;
}
</style>